function Swiper(el) {
    this.el = document.querySelector(el)
    this.t
    this.init()
    // = null
    this.num = 1
}
Swiper.prototype.init = function () {
    //定时器
    
    
    this.autoplay()
    // 鼠标移入
    this.mouseover()
    //鼠标移出
    //   this.mouseout()
}


// 封装同步分页器(pager)
Swiper.prototype.Pager = function (num) {
    this.el.querySelector('ul li.active').className = ''
    this.el.querySelector(`ul li:nth-of-type(${num})`).className = 'active'
}

// 定时器
Swiper.prototype.autoplay = function () {
    // 定时器外面定义num

    this.t = setInterval(() => {
        this.num++
        if (this.num > 6)  this.num = 1
        // 同步图片(图片随着每秒,num的改变)
        this.el.querySelector('img').src = `./imgs/img${this.num}.png`
        // 同步分页器(调用分页器)
        this.Pager(this.num)

    }, 1000)

}


// 鼠标移入
Swiper.prototype.mouseover = function () {
    // 1.获取所有分页器标签li,遍历
    let ulliObj = this.el.querySelectorAll('ul li')
    ulliObj.forEach((item, i) => {
        // 1.1遍历中-给每个li绑定鼠标移入事件
        item.onmouseover = () => {
            // 事件处理函数中-清除定时器(图片切换)
            clearInterval(this.t)
            // 事件处理函数中-同步图片
            this.el.querySelector('img').src = `./imgs/img${i + 1}.png`
            // 事件处理函数中-同步图片的索引
            this.num = i + 1
            // 事件处理函数中-同步分页器
            this.Pager(this.num)
        }
        // 1.2遍历中-给每个li绑定鼠标移出事件
        item.onmouseout=()=>{
            this.mouseout()
        }

    })
}

//鼠标移出
Swiper.prototype.mouseout=function(){
    // 鼠标移出,定时器开始
    this.autoplay()
}
// export default Swiper